<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;
        window.onbeforeunload = function(){
            ws_hdl.close();
        }
        //给按钮添加点击事件
        var flag = "stop";
        var be = document.getElementById("match-button");
        be.onclick = function(){
            if(flag == "stop"){
                //处理匹配开始
                var resp = {optype:"match_start"}
                ws_hdl.send(JSON.stringify(resp))
            }
            else{
                //处理停止匹配
                var resp = {optype:"match_stop"}
                ws_hdl.send(JSON.stringify(resp))
            }
        }
        function get_user_info() {
            $.ajax({
                url: "/info",
                type: "get",
                success: function (res) {
                    var user_info_html = "<p>" + "用户: " + res.username + "分数: " + res.score + "</br>" +
                        "比赛场次: " + res.total_count + "获胜场次: " + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = user_info_html;
                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onmessage= ws_onmessage;
                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }
        function ws_onopen() {
            console.log("ws_onopen!");
        }
        function ws_onerror() {
            console.log("ws_onerror!");
        }
        function ws_onclose() {
            console.log("ws_onclose!");
        }
        function ws_onmessage(evt) {
            var json_resp = JSON.parse(evt.data);
            if(json_resp["result"] == false){
                //直接跳回登陆页面
                location.replace("/login.html");
                return;
            }
            if(json_resp["optype"] == "match_start"){
                console.log("玩家已经进入匹配队列，匹配中");
                flag = "start";
                be.innerHTML = "正在匹配，点击按钮取消匹配!";
            }
            else if(json_resp["optype"] == "match_success"){
                alert("匹配成功，开始游戏!");
                location.replace("/game_room.html");
            }
            else if(json_resp["optype"] == "hall_ready"){
                alert("进入游戏大厅");
            }
            else if(json_resp["optype"] == "match_stop"){
                console.log("取消匹配，玩家从匹配队列中移除!");
                flag = "stop";
                be.innerHTML = "开始匹配";
            }
            else{
                //这里说明玩家信息出现问题，简单处理，直接返回登陆页面
                location.replace("/login.html");
            }
        }

        get_user_info()
    </script>
</body>

</html>